<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎进入163 Mail 系统</title>
  <link rel="stylesheet" href="styles.css">
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f6f7f9;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      width: 400px;
      background: #fff;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      overflow: hidden;
    }

    .box {
      padding: 20px;
    }

    .tabs {
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;
    }

    .tab {
      width: 50%;
      text-align: center;
      padding: 10px;
      cursor: pointer;
      background: gray;
      transition: background 0.3s;
    }

    .tab.active {
      background: #0072e3;
      border-bottom: 2px solid #0072e3;
    }

    .form {
      display: none;
    }

    .form.active {
      display: block;
    }

    h2 {
      text-align: center;
      color: #333;
    }

    input[type="email"], input[type="password"], input[type="text"] {
      width: calc(100% - 20px);
      padding: 10px;
      margin: 10px auto;
      display: block;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    button {
      width: calc(100% - 20px);
      padding: 10px;
      margin: 20px auto;
      display: block;
      background: #0072e3;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    button:hover {
      background: #005bb5;
    }

    p {
      text-align: center;
    }

    p a {
      color: #0072e3;
      text-decoration: none;
    }

    p a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="box">
    <div class="tabs">
      <button id="login-tab" class="tab active">登 录</button>
      <button id="register-tab" class="tab">注 册</button>
    </div>

    <div id="login-form" class="form active">
      <h2>Mail 登 录</h2>
      <form action="login" method="post">
        <input type="email" name="um.email" placeholder="Email" required>
        <input type="password" name="um.password" placeholder="Password" required>
        <button type="submit">Login</button>
      </form>
     <p><a href="/reloadpwd.jsp">忘记密码?</a></p>
    </div>

    <div id="register-form" class="form">
      <h2>Mail 注 册</h2>
      <form action="register" method="post">
        <input type="text" name="um.name" placeholder="Username" required>
        <input type="email" name="um.email" placeholder="Email" required>
        <input type="password" name="um.password" placeholder="Password" required>
        <button type="submit">Register</button>
      </form>
    </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const loginTab = document.getElementById('login-tab');
    const registerTab = document.getElementById('register-tab');
    const loginForm = document.getElementById('login-form');
    const registerForm = document.getElementById('register-form');

    loginTab.addEventListener('click', function () {
      loginForm.classList.add('active');
      registerForm.classList.remove('active');
      loginTab.classList.add('active');
      registerTab.classList.remove('active');
    });

    registerTab.addEventListener('click', function () {
      registerForm.classList.add('active');
      loginForm.classList.remove('active');
      registerTab.classList.add('active');
      loginTab.classList.remove('active');
    });
  });
</script>
</body>
</html>